<template>
	<view class="m-page">
		<view v-if="deleteList.length === 0">
			空
		</view>
		<view class="m-card-list" v-else>
			<view v-for="item in deleteList " :key="item.id" :class="['m-card', item.isTop===1? 'm-top' : '']">
				<view class="m-date">{{item.addtime}}</view>
				<view class="m-title">{{item.title}}</view>
				<view class="m-content">
					{{item.content}}
				</view>
				<view class="m-delete">
					<!-- <checkbox class='round red' :class="checkbox[1].checked?'':'checked'" :checked="checkbox[1].checked?false:true"
					 value="1"></checkbox> -->
					<checkbox-group @change="change(item.id)">
						<label>
							<checkbox class='round red' :checked="flag" />
						</label>
					</checkbox-group>
				</view>
			</view>
		</view>
		<view class="footer">
			<button class="checkedAll" @click="checkedAll">全选</button>
			<button class="deleteAll" type="warn" @click="deleteAll">删除</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkbox: [{
					value: '1',
					checked: true
				}, {
					value: '2',
					checked: true
				}],
				deleteList: "",
				ids: [],
				flag: false
			}
		},
		methods: {
			checkedAll() {
				this.flag = !this.flag
				if (this.flag) {
					for (const item of this.deleteList) {
						this.ids.push(item.id)
					}
				} else {
					this.ids = []
				}
			},
			change(id) {
				const index = this.ids.indexOf(id)
				if (index === -1) {
					this.ids.push(id)
				} else {
					this.ids.splice(index, 1)
				}
			},
			deleteAll() {
				const that = this;
				if (that.ids.length === 0) {
					uni.showToast({
						title: "请先选择记录",
						image: "/static/error.png"
					})
					return;
				}
				uni.showModal({
					title: '提示',
					content: '您确认要删除' + that.ids.length + '条记录吗？',
					success: function(res) {
						if (res.confirm) {
							uni.request({
								// url:'http://47.94.164.187:9001/api/content/list/',
								url: 'http://127.0.0.1:9001/api/content/del_all',
								method: 'DELETE',
								header: {
									token: uni.getStorageSync('token')
								},
								data: {
									ids: that.ids
								},
								success: (res) => {
									console.log(res)
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},
		onLoad() {
			uni.request({
				// url:'http://47.94.164.187:9001/api/content/list/',
				url: 'http://127.0.0.1:9001/api/content/list_del',
				method: 'GET',
				header: {
					token: uni.getStorageSync('token')
				},
				success: (res) => {
					console.log(res)
					this.deleteList = res.data.data
				}
			});
		}

	}
</script>

<style lang="scss" scoped>
	.m-page {
		.m-card-list {
			padding: 30rpx;

			.m-card {
				margin-bottom: 30rpx;
				padding: 20rpx;
				background: #fff;
				border-radius: 15rpx;
				position: relative;

				&:last-child {
					margin-bottom: 0;
				}

				&.m-top {
					position: relative;

					&::after {
						position: absolute;
						content: "";

						border: {
							top: 14rpx solid red;
							right: 10rpx solid red;
							bottom: 14rpx solid transparent;
							left: 10rpx solid red;
						}

						;
						right: 40rpx;
						top:0;
					}
				}

				.m-date {
					color: #bcbcbc;
				}

				.m-title {
					font-size: 16px;
					margin-top: 20rpx;
				}

				.m-content {
					margin-top: 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2; //行数
					-webkit-box-orient: vertical;
					color: #bcbcbc;
					word-break: break-all;
				}

				.m-delete {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		.footer {
			position: fixed;
			width: 750rpx;
			bottom: 0;
			display: flex;

			.checkedAll {
				flex: 1;
			}

			.deleteAll {
				flex: 1;
			}
		}
	}
</style>
